<template>
  <div class="userCenter">
    <div class="container">
      <div class="container_title">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">个人中心</span>
      </div>
      <div class="container_content">
        <div class="form_box">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <Form-item label="账号" prop="account">
              <Input v-model="formValidate.account" placeholder="请填写账号" disabled></Input>
            </Form-item>
            <Form-item label="姓名" prop="realName">
              <Input v-model="formValidate.realName" placeholder="请填写真实姓名"></Input>
            </Form-item>
            <Form-item label="学校" prop="school">
              <Input v-model="formValidate.school" placeholder="请填写学校"></Input>
            </Form-item>
            <Form-item label="头像">
              <upLoadHeadPic :headPic="formValidate.headPic" />
            </Form-item>
            <Form-item label="邮箱" prop="mail">
              <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
            </Form-item>
            <Form-item label="介绍" prop="desc">
              <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </Form-item>
            <Form-item>
              <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
            </Form-item>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import upLoadHeadPic from './module/upLoadHeadPic.vue'
  export default {
    name: "userCenter",
    data() {
      return {
        formValidate: {
          account: '',
          realName: '',
          school: '',
          headPic: '',
          mail: '',
          desc: ''
        },
        ruleValidate: {
          account: [
            { required: true, message: '账号必填', trigger: 'blur' }
          ],
          realName: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          school: [
            { required: true, message: '学校必填', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
          desc: [
            { required: false, message: '请输入个人介绍', trigger: 'blur' },
            { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      upLoadHeadPic
    },
    created() {
      // console.log(this.$store.state.user);
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        let userInfo = JSON.parse(this.$Cookie.get('et-userInfo'));
        console.log(userInfo);
        if(userInfo) {
          this.formValidate.account = 'admin';
          this.formValidate.realName = userInfo.realName;
          this.formValidate.school = userInfo.schoolName;
          this.formValidate.mail = '1236547@136.com';
          this.formValidate.headPic = userInfo.headerPic;
        }else{
          // 清空cookie 跳转登录页
        }
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('保存成功!');
          } else {
            this.$Message.error('保存失败!');
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .userCenter {
    .container_content{
      padding: 16px;

    }
    .form_box{
      /*border: 1px solid red;*/
      max-width: 500px;
    }
  }
</style>
